<template>
  <el-container @mouseenter="handleContainerMouseEnter" @mouseleave="handleContainerMouseLeave" class="el-container">
    <el-header class="header">
      <div class="header-content">
        <h1 class="title">企业人事管理系统-员工系统</h1>
        <!-- 如果用户已登录，显示欢迎信息和登出按钮 -->
        <div v-if="userInfo" class="welcome-container">
          <span>欢迎您，{{ userInfo.userName }}</span>
          <el-button type="danger" @click="logout" size="mini">登出</el-button>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside
          width="200px"
          class="aside"
          :style="{width: isCollapsed ? '64px' : '200px'}"
          @mouseenter="handleAsideMouseEnter"
          @mouseleave="handleAsideMouseLeave"
      >
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            :collapse="isCollapsed"
        >
          <el-menu-item index="1" @click="setCurrentComponent(MyInformation)">
            <el-icon :size="isCollapsed ? 18 : 22">
              <user />
            </el-icon>
            <span slot="title">个人用户信息</span>
          </el-menu-item>
          <el-menu-item index="2" @click="setCurrentComponent(MyAttendance)">
            <el-icon :size="isCollapsed ? 18 : 22">
              <calendar />
            </el-icon>
            <span slot="title">我的考勤</span>
          </el-menu-item>
          <el-menu-item index="3" @click="setCurrentComponent(MyRequest)">
            <el-icon :size="isCollapsed ? 18 : 22">
              <check />
            </el-icon>
            <span slot="title">我的申请</span>
          </el-menu-item>
          <el-menu-item index="4" @click="setCurrentComponent(MyPerformance)">
            <el-icon :size="isCollapsed ? 18 : 22">
              <data-line />
            </el-icon>
            <span slot="title">我的绩效</span>
          </el-menu-item>
          <el-menu-item index="5" @click="setCurrentComponent(SalariesHistory)">
            <el-icon :size="isCollapsed ? 18 : 22">
              <money />
            </el-icon>
            <span slot="title">工资发放历史</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main class="main" @mouseenter="handleMainMouseEnter" @mouseleave="handleMainMouseLeave">
        <!-- 确保动态组件正常加载 -->
        <component :is="currentComponent" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import {
  Calendar,
  Check,
  PieChart,
  Money,
  Document,
  User,
  DataLine
} from '@element-plus/icons-vue'

// 引入组件
import MyInformation from "@/views/CommonUser/MyInformation.vue";
import MyAttendance from "@/views/CommonUser/MyAttendance.vue";
import MyPerformance from "@/views/CommonUser/MyPerformance.vue";
import MyRequest from "@/views/CommonUser/MyRequest.vue";
import SalariesHistory from "@/views/CommonUser/SalariesHistory.vue";

// 用户信息
const userInfo = ref(null)

// 当前渲染的组件
const currentComponent = ref(MyInformation)

const isCollapsed = ref(true)  // 默认收起

onMounted(() => {
  const storedUserInfo = sessionStorage.getItem('userInfo')
  if (storedUserInfo) {
    userInfo.value = JSON.parse(storedUserInfo)
  }
})

// 容器鼠标进入时阻止折叠
const handleContainerMouseEnter = () => {
  clearTimeout(timer.value)
  isCollapsed.value = false
}

// 容器鼠标离开时延时折叠
const handleContainerMouseLeave = () => {
  timer.value = setTimeout(() => {
    isCollapsed.value = true
  }, 300)  // 延迟300毫秒后折叠
}

// 侧边栏鼠标进入时展开
const handleAsideMouseEnter = () => {
  isCollapsed.value = false
  clearTimeout(timer.value)
}

// 侧边栏鼠标离开时不处理，因为由容器统一处理
const handleAsideMouseLeave = () => {}

// 主内容区域鼠标进入时收起侧边栏
const handleMainMouseEnter = () => {
  clearTimeout(timer.value)
  isCollapsed.value = true
}

// 主内容区域鼠标离开时不处理，因为由容器统一处理
const handleMainMouseLeave = () => {}

// 设置当前组件
function setCurrentComponent(component) {
  currentComponent.value = component
}

// 登出功能
const logout = () => {
  ElMessageBox.confirm('您确认要退出登录吗？', '退出登录', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('userInfo')
    userInfo.value = null
    window.location.href = '/'  // 假设登录页面的路径是 '/'
  }).catch(() => {
    console.log('用户取消退出')
  })
}

const timer = ref(null)
</script>

<style scoped>
.header {
  background: linear-gradient(135deg, #00b09b, #96c93d);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  font-size: 20px;
}
.title {
  font-size: 32px;
  font-weight: bold;
  color: rgba(33, 245, 0, 0.95);
  text-align: center; /* 居中对齐 */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 文字阴影 */
  letter-spacing: 2px; /* 字母间距 */
  padding: 20px;
  border-bottom: 2px solid #4caf50; /* 底部边框 */
}
.header-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.welcome-container {
  display: flex;
  align-items: center;
}

.welcome-container span {
  margin-right: 10px;
  font-size: 16px;
}

.el-container {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.aside {
  background-color: #d3dce6;
  transition: width 0.3s ease-in-out;
  overflow: hidden;
}

/* 侧边栏收起时显示的文字 */
.collapsed-menu-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 60px;
  width: 100%;
  height: 120px;
}

.main {
  background-color: #e9eef3;
  padding: 20px;
}
</style>
